import React, { useState, useEffect } from 'react';
import { 
  Table, Input, Select, DatePicker, 
  Button, Space, Collapse, Row, Col 
} from 'antd';
import { debounce } from 'lodash';
import moment from 'moment';
// 修正图标导入 - 使用正确的图标名称和导入方式
import SearchOutlined from '@ant-design/icons/SearchOutlined';
import ReloadOutlined from '@ant-design/icons/ReloadOutlined'; // 替换 RefreshOutlined 为 ReloadOutlined
import SaveOutlined from '@ant-design/icons/SaveOutlined';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { Panel } = Collapse;

// 示例表格数据
const mockTableData = [
  { id: 1, name: '张三', department: '技术部', status: '在职', joinDate: '2020-01-15' },
  { id: 2, name: '李四', department: '市场部', status: '离职', joinDate: '2019-03-20' },
  { id: 3, name: '王五', department: '人事部', status: '试用期', joinDate: '2023-05-10' },
  { id: 4, name: '赵六', department: '财务部', status: '在职', joinDate: '2021-09-01' },
];

// 部门列表（下拉选项）
const departmentOptions = ['技术部', '市场部', '人事部', '财务部'].map(dept => (
  <Option key={dept} value={dept}>{dept}</Option>
));

// 状态列表（下拉选项）
const statusOptions = ['在职', '离职', '试用期'].map(status => (
  <Option key={status} value={status}>{status}</Option>
));

const TableWithSearch = () => {
  // 搜索条件状态
  const [searchParams, setSearchParams] = useState({
    name: '',         // 姓名搜索
    department: '',   // 部门筛选
    status: '',       // 状态筛选
    joinDate: [],     // 入职日期范围
  });
  
  // 表格数据状态
  const [tableData, setTableData] = useState(mockTableData);
  // 搜索区域展开状态
  const [expandSearch, setExpandSearch] = useState(false);

  // 从本地存储加载搜索条件（刷新页面后保留）
  useEffect(() => {
    try {
      const savedParams = localStorage.getItem('tableSearchParams');
      if (savedParams) {
        setSearchParams(JSON.parse(savedParams));
      }
    } catch (error) {
      console.error('加载保存的搜索条件失败:', error);
      localStorage.removeItem('tableSearchParams');
    }
  }, []);

  // 防抖处理搜索（输入时延迟执行，避免频繁请求）
//   const debouncedSearch = useCallback(
//     debounce((params) => {
//       // 实际项目中这里会调用接口：api.getTableData(params).then(...)
//       console.log('搜索参数:', params);
//       // 模拟接口筛选数据
//       const filteredData = mockTableData.filter(item => {
//         const matchName = item.name.includes(params.name);
//         const matchDept = !params.department || item.department === params.department;
//         const matchStatus = !params.status || item.status === params.status;
//         const matchDate = !params.joinDate.length 
//           ? true 
//           : (item.joinDate >= params.joinDate[0] && item.joinDate <= params.joinDate[1]);
//         return matchName && matchDept && matchStatus && matchDate;
//       });
//       setTableData(filteredData);
//     }, 500), // 500ms防抖
//     [mockTableData,setTableData]
//   );
  const debouncedSearch = 
    debounce((params) => {
      // 实际项目中这里会调用接口：api.getTableData(params).then(...)
      console.log('搜索参数:', params);
      // 模拟接口筛选数据
      const filteredData = mockTableData.filter(item => {
        const matchName = item.name.includes(params.name);
        const matchDept = !params.department || item.department === params.department;
        const matchStatus = !params.status || item.status === params.status;
        const matchDate = !params.joinDate.length 
          ? true 
          : (item.joinDate >= params.joinDate[0] && item.joinDate <= params.joinDate[1]);
        return matchName && matchDept && matchStatus && matchDate;
      });
      setTableData(filteredData);
    }, 500) // 500ms防抖
    
  // 搜索条件变化时触发搜索
  useEffect(() => {
    const searchTimeout = setTimeout(() => {
      debouncedSearch(searchParams);
      // 保存搜索条件到本地存储
      try {
        localStorage.setItem('tableSearchParams', JSON.stringify(searchParams));
      } catch (error) {
        console.error('保存搜索条件失败:', error);
      }
    }, 100);

    return () => clearTimeout(searchTimeout);
  }, [searchParams, debouncedSearch]);

  // 处理输入框变化
  const handleInputChange = (key, value) => {
    // 处理日期范围的特殊情况
    if (key === 'joinDate' && value) {
      // 将Moment对象转换为字符串以便本地存储
      const dateValues = value.map(date => date?.format('YYYY-MM-DD') || '');
      setSearchParams(prev => ({ ...prev, [key]: dateValues }));
    } else {
      setSearchParams(prev => ({ ...prev, [key]: value }));
    }
  };

  // 重置搜索条件
  const handleReset = () => {
    setSearchParams({
      name: '',
      department: '',
      status: '',
      joinDate: [],
    });
    localStorage.removeItem('tableSearchParams'); // 清除本地存储
  };

  // 保存当前搜索条件（可选：可扩展为保存到用户配置）
  const handleSaveSearch = () => {
    // 实际项目中可调用接口保存到用户配置表
    console.log('保存搜索条件:', searchParams);
    // 提示用户
    alert('搜索条件已保存');
  };

  // 组件卸载时清除防抖
  useEffect(() => {
    return () => {
      debouncedSearch.cancel();
    };
  }, [debouncedSearch]);

  return (
    <div >
      {/* 搜索区域 */}
      <div style={{ marginBottom: 16, border: '1px solid #e8e8e8', borderRadius: 4, padding: 16 }}>
        {/* 基础搜索项（始终显示） */}
        <Row gutter={[16, 16]} align="middle">
          <Col xs={24} sm={12} md={8} lg={6}>
            <Input
              placeholder="姓名搜索"
              value={searchParams.name}
              onChange={(e) => handleInputChange('name', e.target.value)}
              prefix={<SearchOutlined />}
            />
          </Col>
          
          <Col xs={24} sm={12} md={8} lg={6}>
            <Select
              placeholder="部门筛选"
              style={{ width: '100%' }}
              value={searchParams.department}
              onChange={(value) => handleInputChange('department', value)}
              allowClear
            >
              {departmentOptions}
            </Select>
          </Col>
          
          {/* 快捷操作按钮（与搜索项同行） */}
          <Col xs={24} sm={24} md={8} lg={12} style={{ textAlign: 'right' }}>
            <Space size="middle">
              <Button 
                type="primary" 
                icon={<SearchOutlined />}
                onClick={() => debouncedSearch.flush()} // 立即执行搜索（跳过防抖）
              >
                搜索
              </Button>
              <Button 
                icon={<ReloadOutlined />}  
                // {/* 使用正确的图标组件 */}
                onClick={handleReset}
              >
                重置
              </Button>
              <Button 
                icon={<SaveOutlined />} 
                onClick={handleSaveSearch}
              >
                保存条件
              </Button>
              <Button 
                onClick={() => setExpandSearch(!expandSearch)}
              >
                {expandSearch ? '收起' : '展开更多'}
              </Button>
            </Space>
          </Col>
        </Row>

        {/* 展开的高级搜索项（默认隐藏） */}
        <Collapse 
          activeKey={expandSearch ? ['advanced'] : []} 
          onChange={() => setExpandSearch(!expandSearch)}
          bordered={false}
          style={{ marginTop: 16 }}
        >
          <Panel header="高级搜索" key="advanced" style={{ padding: 0 }}>
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={12} md={8} lg={6}>
                <Select
                  placeholder="状态筛选"
                  style={{ width: '100%' }}
                  value={searchParams.status}
                  onChange={(value) => handleInputChange('status', value)}
                  allowClear
                >
                  {statusOptions}
                </Select>
              </Col>
              
              <Col xs={24} sm={12} md={8} lg={6}>
                <RangePicker
                  placeholder={['入职开始日期', '入职结束日期']}
                  value={searchParams.joinDate.map(date => date ? moment(date) : null)}
                  onChange={(dates) => handleInputChange('joinDate', dates)}
                  style={{ width: '100%' }}
                />
              </Col>
              
              {/* 可扩展更多搜索项... */}
            </Row>
          </Panel>
        </Collapse>
      </div>

      {/* 表格展示 */}
      <Table
        dataSource={tableData}
        columns={[
          { title: 'ID', dataIndex: 'id', key: 'id' },
          { title: '姓名', dataIndex: 'name', key: 'name' },
          { title: '部门', dataIndex: 'department', key: 'department' },
          { title: '状态', dataIndex: 'status', key: 'status' },
          { title: '入职日期', dataIndex: 'joinDate', key: 'joinDate' },
        ]}
        rowKey="id"
        pagination={{ pageSize: 10 }}
      />
    </div>
  );
};

export default TableWithSearch;
